<template>
	<view class="fish">
		<view class="" style="flex: 1; padding-top: 200rpx; width: 100vw;">
			<view class="abc" style="position: fixed; top: 0; width: 100%; left: 0;">
				<view class="nav">
					<Nav bg-color="rgba(0,0,0,0)" title="解压颂钵" color="#fff" >
						<view class="" style="padding: 20rpx; width: 30px;">
						</view>
					</Nav>
				</view>
				<view class="" style="text-align: center;">
					<text style="color: #f2df97; font-weight: bold; font-size: 50rpx;">{{count}}</text>
				</view>
				<view class="btns">
					<view class="btn" @click="muted = !muted" :style="{'color':!muted ? '#fff' : 'rgba(255,255,255,0.6)'}">
						<uni-icons type="sound-filled" size="30" :color="!muted ? '#fff' : 'rgba(255,255,255,0.6)'"></uni-icons>
						<text>声音</text>
					</view>
					<view class="btn" @click="count = 0">
						<uni-icons type="refresh-filled" size="30" color="#fff"></uni-icons>
						<text>重置</text>
					</view>
					<view class="btn" @click="autoSwitch" :style="{'color':auto ? '#fff' : 'rgba(255,255,255,0.6)'}">
						<uni-icons type="loop" size="30" :color="auto ? '#fff' : 'rgba(255,255,255,0.6)'"></uni-icons>
						<text>自动</text>
					</view>
				</view>
			</view>
			
		</view>
		<view class="" style="flex: 1; width: 100%;">
			<view class="muyu-bar" @tap="knock">
				<view ref="text" v-for="(item, i) in textData" :animation="item.animationTextData" class="text">
					<text>{{item.text}}</text>
				</view>
				
				
				<view ref="bang" :animation="animationBangData" class="bang" style="transform: skew(341deg, 25deg);">
					<image src="/static/chime/gu.png" mode="aspectFit"
						style="width: 400rpx; height: 530rpx;transform: rotate(99deg) translate(0, -160px);margin-top: 50rpx;" />
				</view>
				<view ref="muyu" :animation="animationMuyuData" class="muyu">
					<image src="/static/chime/muyu.png" mode="aspectFill"
						style="width: 500rpx; height: 500rpx;" />
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Nav from "@/components/nav.vue"
	export default {
		components: {
			Nav
		},
		data() {
			return {
				animationMuyuData: {},
				animationTextData: {},
				animationBangData: {},
				textData: new Array(20).fill("").map((item, i) => {
					return {
						text: "功德 + 1",
						animationTextData: {}
					}
				}),
				i: 0,
				count: 0,
				auto: false,
				muted: false,
				timer: null
			}
		},
		onShow() {
			this.animationMuyu = uni.createAnimation({
				duration: 25,
				delay: 25,
				timingFunction: 'ease',
			})
			this.animationBang = uni.createAnimation({
				duration: 60,
				timingFunction: 'step-start',
				// transformOrigin: '170% 25%'
			})
			this.textData.forEach((item) => {
				item.animation = uni.createAnimation({
					duration: 700,
					delay: 25
				})
				return item
			})
		},
		methods: {
			knock(){
				if(this.auto) return;
				this.muyuAnimation()
			},
			muyuAnimation() {
				this.count++
				this.i++
				this.i = this.i === this.textData.length ? 0 : this.i

				this.animationMuyu.scale(.98, .98).step()
				this.animationMuyuData = this.animationMuyu.export()
				setTimeout(function() {
					this.animationMuyu.scale(1, 1).step()
					this.animationMuyuData = this.animationMuyu.export()
				}.bind(this), 50)

				this.animationBang.translate('-58px', '150px').skew('20deg', '331deg').step()
				// this.animationBang.skew('21deg', '326deg').step()
				this.animationBangData = this.animationBang.export()
				setTimeout(function() {
					// this.animationBang.rotate(0).translateX('0px').skew('0', '0').step()
					this.animationBang.translate('0', '0').skew('341deg', '25deg').step()
					this.animationBangData = this.animationBang.export()
				}.bind(this), 50)
				
				if(!this.muted) this.audioFn()
				// #ifndef H5
				uni.vibrateShort()
				// #endif

				this.textAnimation()

			},
			textAnimation() {
				const animation = this.textData[this.i]
				animation.animation.translateY('-50px').opacity(1).step()
				animation.animationTextData = animation.animation.export()
				setTimeout(() => {
					animation.animation.opacity(0).step()
					animation.animationTextData = animation.animation.export()

					setTimeout(() => {
						animation.animation.translateY(0).step()
						animation.animationTextData = animation.animation.export()
					}, 700)
				}, 700)
			},
			audioFn: function() {
				const innerAudioContext = uni.createInnerAudioContext()
				innerAudioContext.autoplay = false // 是否自动开始播放，默认为 false
				innerAudioContext.loop = false // 是否循环播放，默认为 false
				// uni.setInnerAudioOption({ // ios在静音状态下能够正常播放音效
				// 	obeyMuteSwitch: false, // 是否遵循系统静音开关，默认为 true。当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音。
				// 	success: function(e) {},
				// 	fail: function(e) {}
				// })
				innerAudioContext.src = "/static/muyu/muyu-2.mp3"
				innerAudioContext.play()
			},
			autoSwitch(){
				this.auto = !this.auto
				if(this.auto) {
					if(this.timer != null) {
						clearInterval(this.timer)
						this.timer = null
					}
					this.muyuAnimation()
					this.timer = setInterval(() => {
						this.muyuAnimation()
					}, 1000)
					return
				} 
				clearInterval(this.timer)
				this.timer = null
			}
		}
	}
</script>

<style scoped>
	.fish {
		width: 100vw;
		height: 100vh;
		background-color: black;
		background-image: url('/static/chime/fo.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.fish::before {
		content: '';
		width: 100vw;
		height: 100vh;
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 1));
		position: absolute;
	}

	.muyu-bar {}

	.bang {
		position: absolute;
		/* margin-left: 50rpx; */
		right: 150rpx;
		margin-top: -200rpx;
		z-index: 1;
	}

	.text {
		color: #fff;
		text-align: center;
		position: absolute;
		width: 200rpx;
		left: 275rpx;
		margin-top: -200rpx;
		opacity: 0
	}

	.muyu {
		text-align: center;
		    position: absolute;
		    z-index: 10;
			width: 100%;
	}
	.btns{
		position: fixed;
		right: 40rpx;
		width: 30px;
		color: #fff;
		font-size: 14px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.btns .btn{
		margin: 20rpx 0;
	}
</style>